<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>全市再生资源综合分拣中心实时展示系统</title>
    <!-- 引入组件库 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/echarts.min.js"></script>
    <!--      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
</head>

<body>
    <div id="app">
        <div class="ScaleBox">
            <div class="header">
                <div class="headerTime">
                    <span class="curHours">{{curHours}}</span>
                    <span class="curFullYear">{{curFullYear}}</span>
                    <span class="curFullYear">{{curWeek}}</span>
                </div>
                <!--            <div class="headerTitle">-->
                <!--            </div>-->
                <div class="headerTq">
                    <img src="./imgs/duoyun.png" alt="">
                    <span>多云 32℃</span>
                </div>
            </div>
            <main class="main">
                <div class="mainLeft">
                    <div class="mainSection1">
                        <div class="mainSectionHeader">
                           <div class="mainSectionHeaderLeft"></div>
                            <div class="mainSectionHeaderTitle">达成率</div>
                            <div class="mainSectionHeaderRight"></div>
                        </div>
                        <div id="leftMap1">
                            <div class="leftMap1Top">
                                <div class="leftMap1TopList">
                                    <div class="leftMap1TopItem" style="margin-top: 8px">
                                        <img src="./imgs/icon_list1_1.png" alt="">
                                        <section>
                                            <div>本月目标回收量</div>
                                            <p><span>1000W</span> 千克</p>
                                        </section>
                                    </div>
                                    <div class="leftMap1TopItem" style="margin-top: 124px">
                                        <img src="./imgs/icon_list1_2.png" alt="">
                                        <section>
                                            <div>本月实际销量</div>
                                            <p><span>800W</span> 千克</p>
                                        </section>
                                    </div>
                                </div>
                                <div id="leftMap1Div">
                                    <div class="leftMap1DivBg">
                                        <div id="leftChart1" style="width: 503px;height: 503px;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mainSection2">
                        <div class="mainSectionHeader">
                            <div class="mainSectionHeaderLeft"></div>
                            <div class="mainSectionHeaderTitle">品类</div>
                            <div class="mainSectionHeaderRight"></div>
                        </div>
                        <div id="leftChart2" style="width: 2098px;height: 720px;">
                        </div>
                    </div>
                    <div class="mainSection3">
                        <div class="mainSectionHeader">
                            <div class="mainSectionHeaderLeft"></div>
                            <div class="mainSectionHeaderTitle">数据分析</div>
                            <div class="mainSectionHeaderRight"></div>
                            <div class="mainSection3Menu">
                                <div class="mainSection3Num" @click="chart6Tab(1)"
                                     :class="{mainSection3Order: activeChart6Tab===1}">订单</div>
                                <div class="mainSection3Num"
                                     @click="chart6Tab(2)"
                                     :class="{activeHeaderTab: activeChart6Tab===2}">金额</div>
                            </div>
                        </div>
                        <section id="middleChart4" style="width:2077px;height: 717px;">

                        </section>
                    </div>
                </div>
                <div class="mainMiddle">
                    <div class="mainMap">
                    </div>
                </div>
                <div class="mainRight">
                    <div class="mainSection4">
                        <div class="mainSectionHeader">
                            <div class="mainSectionHeaderLeft"></div>
                            <div class="mainSectionHeaderTitle">区域接单</div>
                            <div class="mainSectionHeaderRight"></div>
                        </div>
                        <div class="mainRight1List">
                            <div class="mainRight1Item" :class="{mainRight1ItemActive: curActive === 1}">
                                <div class="mainRight1LeftImg">
                                    01
                                </div>
                                <div class="mainRight1LeftText">二环线到杨泗港快速路，江城大道到长江</div>
                                <div class="leftChart3Main">
                                    <el-progress :percentage="90" :stroke-width="32" :show-text="false" :color="['#4bd2ff','#2480ff']"></el-progress>
                                </div>
                                <img src="./imgs/icon_list4-3.png" alt="">
                                <div class="mainRight1LeftNum">143725.01 kg</div>
                            </div>
                            <div class="mainRight1Item" :class="{mainRight1ItemActive: curActive === 2}">
                                <div class="mainRight1LeftImg">
                                    02
                                </div>
                                <div class="mainRight1LeftText">武昌-洪山</div>
                                <div class="leftChart3Main">
                                    <el-progress :percentage="80" :stroke-width="32" :show-text="false" :color="['#4bd2ff','#2480ff']"></el-progress>
                                </div>
                                <img src="./imgs/icon_list4-3.png" alt="">
                                <div class="mainRight1LeftNum">109381.30 kg</div>
                            </div>
                            <div class="mainRight1Item" :class="{mainRight1ItemActive: curActive === 3}">
                                <div class="mainRight1LeftImg">
                                    03
                                </div>
                                <div class="mainRight1LeftText">汉阳大道到杨泗港快速路</div>
                                <div class="leftChart3Main">
                                    <el-progress :percentage="70" :stroke-width="32" :show-text="false" :color="['#4bd2ff','#2480ff']"></el-progress>
                                </div>
                                <img src="./imgs/icon_list4-3.png" alt="">
                                <div class="mainRight1LeftNum">83070.21 kg</div>
                            </div>
                            <div class="mainRight1Item" :class="{mainRight1ItemActive: curActive === 4}">
                                <div class="mainRight1LeftImg">
                                    04
                                </div>
                                <div class="mainRight1LeftText">汉阳大道到二环线，江城大道到长江，江城大道到长江</div>
                                <div class="leftChart3Main">
                                    <el-progress :percentage="60" :stroke-width="32" :show-text="false" :color="['#4bd2ff','#2480ff']"></el-progress>
                                </div>
                                <img src="./imgs/icon_list4-3.png" alt="">
                                <div class="mainRight1LeftNum">75339.04 kg</div>
                            </div>
                            <div class="mainRight1Item" :class="{mainRight1ItemActive: curActive === 5}">
                                <div class="mainRight1LeftImg">
                                    05
                                </div>
                                <div class="mainRight1LeftText">三角湖路到东风大道</div>
                                <div class="leftChart3Main">
                                    <el-progress :percentage="50" :stroke-width="32" :show-text="false" :color="['#4bd2ff','#2480ff']"></el-progress>
                                </div>
                                <img src="./imgs/icon_list4-3.png" alt="">
                                <div class="mainRight1LeftNum">70083.10 kg</div>
                            </div>
                            <div class="mainRight1Item" :class="{mainRight1ItemActive: curActive === 6}">
                                <div class="mainRight1LeftImg">
                                    06
                                </div>
                                <div class="mainRight1LeftText">东西湖大区</div>
                                <div class="leftChart3Main">
                                    <el-progress :percentage="20" :stroke-width="32" :show-text="false" :color="['#2480ff']"></el-progress>
                                </div>
                                <img src="./imgs/icon_list4-3.png" alt="">
                                <div class="mainRight1LeftNum">64742.43 kg</div>
                            </div>
                        </div>
                    </div>
                    <div class="mainSection5">
                        <div class="mainSectionHeader">
                            <div class="mainSectionHeaderLeft"></div>
                            <div class="mainSectionHeaderTitle">最新订单</div>
                            <div class="mainSectionHeaderRight"></div>
                        </div>
                        <div class="mainRight2List">
                            <div class="mainRight2Item">
                                <div class="mainRight2ListTop">
                                    <div class="mainRight2ListIcon672">
                                    </div>
                                    <div class="mainRight2ListTopLeft">
                                        湖北法雷奥车灯有限公司
                                    </div>
                                    <div class="mainRight2ListTopRight">共 381.70kg</div>
                                </div>
                                <div class="mainRight2ListBottom">
                                    <div>
                                        铝 3.700kg ￥18.50
                                    </div>
                                    <div class="mainRight2ListBottomText">
                                        废旧纸箱 336.000kg ￥403.20
                                    </div>
                                    <div>
                                        废塑料筐 42.000kg ￥8.40
                                    </div>
                                </div>
                            </div>
                            <div class="mainRight2Item">
                                <div class="mainRight2ListTop">
                                    <div class="mainRight2ListIcondff">
                                    </div>
                                    <div class="mainRight2ListTopLeft">
                                        湖北省武汉市蔡甸区(沌口)经济技术开发区创业二路9号
                                    </div>
                                    <div class="mainRight2ListTopRight">共 609.70kg</div>
                                </div>
                                <div class="mainRight2ListBottom">
                                    <div>
                                        废旧纸箱 327.000kg ￥392.40
                                    </div>
                                    <div class="mainRight2ListBottomText">
                                        废旧杂纸 30.500kg ￥15.25
                                    </div>
                                    <div>
                                        废塑料筐 252.200kg ￥50.44
                                    </div>
                                </div>
                            </div>
                            <div class="mainRight2Item">
                                <div class="mainRight2ListTop">
                                    <div class="mainRight2ListIcon672">
                                    </div>
                                    <div class="mainRight2ListTopLeft">
                                        湖北法雷奥车灯有限公司
                                    </div>
                                    <div class="mainRight2ListTopRight">共 381.70kg</div>
                                </div>
                                <div class="mainRight2ListBottom">
                                    <div>
                                        废旧纸箱 330.000kg ￥396.00
                                    </div>
                                </div>
                            </div>
                            <div class="mainRight2Item">
                                <div class="mainRight2ListTop">
                                    <div class="mainRight2ListIcon">
                                    </div>
                                    <div class="mainRight2ListTopLeft">
                                        武汉开发区公路运输管理所
                                    </div>
                                    <div class="mainRight2ListTopRight">共 327.30kg</div>
                                </div>
                                <div class="mainRight2ListBottom">
                                    <div>
                                        废旧纸箱 237.300kg ￥284.76
                                    </div>
                                    <div class="mainRight2ListBottomText">
                                        废旧杂纸 30.500kg ￥15.25
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            scale: null,
            width: 1920,
            height: 1080,
            curActive: 3,
            curHours: '',
            curFullYear: '',
            curWeek: '',
            selectActive: '',
            activeChart6Tab: 1,
            options: [{
                value: '1',
                label: '近六个月'
            }, {
                value: '2',
                label: '近一个月'
            }, {
                value: '3',
                label: '近一年'
            }],
            selectDateItem: [{
                value: '1',
                label: '近六个月'
            }, {
                value: '1',
                label: '近六个月'
            }, {
                value: '1',
                label: '近六个月'
            }, {
                value: '1',
                label: '近六个月'
            }],
            value: '1'
        },
        methods: {
            // 左一
            leftMap1Div() {
                const vm = this
                let myChart = echarts.init(document.getElementById('leftChart1'));
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {},
                    series: [{
                        type: 'gauge',
                        startAngle: 60,
                        endAngle: -300,
                        clockwise: false,
                        pointer: {
                            show: false
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true,
                            clip: false,
                            color: '#091A2B',
                            itemStyle: {
                                width: 20,
                                color: '#04a3ff',
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                width: 20,
                                color: [
                                    [1, '#041E35']
                                ]
                            }
                        },
                        splitLine: {
                            show: false,
                            distance: 0,
                            length: 10
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            distance: 50,
                            // borderColor: '#091A2B'
                        },
                        data: [{
                            value: 60,
                            // name: '完成率',
                            detail: {
                                offsetCenter: ['0%', '0%']
                            },
                            // title: {
                            //     offsetCenter: ['-6%', '30%']
                            // }
                        }],
                        // title: {
                        //     fontSize: 43,
                        //     color: '#FEFFFF'
                        // },
                        detail: {
                            width: 50,
                            height: 14,
                            fontSize: 103,
                            color: '#04a3ff',
                            borderColor: 'auto',
                            borderRadius: 20,
                            formatter: function (value, index) {
                                return `${value}{a|%}`;
                            },
                            rich: {
                                a: {
                                    fontSize: 43,
                                    padding: [0, 0, 0, 20]
                                }
                            }
                        }
                    }]
                };
                // 因为有定时刷新，所以先清除
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
            },
            // 左二
            leftMap2Div() {
                const vm = this
                let myChart = echarts.init(document.getElementById('leftChart2'));
                // 指定图表的配置项和数据
                let option = {
                    grid: {
                        left: '0',
                        right: '0',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: 28,
                                    color: '#a1ddff'
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    type:  'solid' ,
                                    color:  '#2f77bd' , //左边线的颜色
                                    width: '4' //坐标线的宽度
                                }
                            },
                            data: ['废旧纸箱', '废塑料筐', '铁', '超市纸箱', '塑料瓶', '塑料框', '杂塑料', '废旧杂纸', '废旧报纸', '废杂塑料']
                        }
                    ],
                    yAxis: [{
                        color: '#F1F1F1',
                        fontSize: 28,
                        type: 'value',
                        max: 200000,
                        axisLabel: {
                            // formatter: '{value} ml',
                            textStyle: {
                                fontSize: 28,
                                color: '#a1ddff'
                            }
                        },
                        nameTextStyle: {
                            fontSize: 28,
                            color: '#a1ddff',
                            padding: [0, 0, 0, -30]    // 四个数字分别为上右下左与原位置距离
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(102, 102, 102, .2)",
                                width: 1,
                                type: "solid"
                            }
                        }
                    }],
                    series: [{
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: '#0e1132',
                        },
                        data: [169961.17, 135683.17, 40676.68, 33043.97, 30183.05, 28982.95, 17992.60,14014.91,13223.88,11209.10],
                        barWidth: 77,//柱图宽度
                        // barGap: 123,
                        itemStyle: {
                            borderStyle:'solid',
                            borderColor:'#2f77bd',
                            borderWidth:2,
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: '#a1ddff',
                                        fontSize: 28
                                    }
                                },
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#2f77bd' },                   //柱图渐变色
                                        { offset: 1, color: '#1c2bff' },                   //柱图渐变色
                                    ]
                                )
                            }
                        }
                    }
                    ]
                };
                // 因为有定时刷新，所以先清除
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
            },
            // 中一
            middleChart4() {
                const vm = this
                let myChart = echarts.init(document.getElementById('middleChart4'));
                // 指定图表的配置项和数据
                let option = {
                    grid: {
                        left: '0',
                        right: '0',
                        bottom: '1%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#F1F1F1'
                            }
                        }
                    },
                    legend: {
                        itemWidth: 40,//图例的宽度
                        itemHeight: 20,//图例的高度
                        itemGap: 155, //图例的间距
                        // selected: {
                        //     销售金额: false
                        // },
                        textStyle: {//图例文字的样式
                            color: '#a1ddff',
                            fontSize: 28,
                            align: 'center',
                            padding: [0, 0, 0, 12]
                        },
                        data: ['2020', '2021']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: 28,
                                    color: '#a1ddff'
                                }
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    type:  'solid' ,
                                    color:  '#2f77bd' , //左边线的颜色
                                    width: '4' //坐标线的宽度
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            min: 0,
                            max: 500,
                            interval: 50,
                            axisLabel: {
                                // formatter: '{value} ml',
                                textStyle: {
                                    fontSize: 28,
                                    color: '#a1ddff'
                                }
                            },
                            nameTextStyle: {
                                fontSize: 28,
                                color: '#a1ddff',
                                padding: [0, 0, 0, -30]    // 四个数字分别为上右下左与原位置距离
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: "rgba(102, 102, 102, .2)",
                                    width: 1,
                                    type: "solid"
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '2020',
                            type: 'bar',
                            data: [122.0, 94.9, 77.0, 123.2, 125.6, 176.7, 335.6,177.0, 223.2, 425.6, 376.7, 335.6],
                            barWidth: 20,//柱图宽度
                            barGap:1,/*多个并排柱子设置柱子之间的间距*/
                            barCategoryGap:14,/*多个并排柱子设置柱子之间的间距*/
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: '#426DE6' },                   //柱图渐变色
                                            { offset: 1, color: '#9DC6F7' },                   //柱图渐变色
                                        ]
                                    )
                                }
                            }
                        },
                        {
                            name: '2021',
                            type: 'bar',
                            data: [122.6, 135.9, 119.0, 226.4, 428.7, 270.7, 175.6,135.9, 219.0, 226.4, 428.7,  375.6],
                            barWidth: 20,//柱图宽度
                            // 设置
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            { offset: 0, color: '#FFBD2E' },                   //柱图渐变色
                                            { offset: 1, color: '#EFD191' },                   //柱图渐变色
                                        ]
                                    )
                                }
                            }
                        }
                    ]
                };
                // 因为有定时刷新，所以先清除
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
            },
            // 中二
            middleChart5() {
                const vm = this
                // 指定图表的配置项和数据
                let _xAxis = ["黄鹤楼1", "黄鹤楼2", "黄鹤楼3", "黄鹤楼4", "黄鹤楼5", "黄鹤楼6"];
                let _series = [
                    {
                        name: "2020",
                        type: "bar",
                        stack: "check",
                        barWidth: 10,//柱图宽度
                        barCategoryGap: '30%',
                        data: [],
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#426DE6' },                   //柱图渐变色
                                        { offset: 1, color: '#9DC6F7' },                   //柱图渐变色
                                    ]
                                ),
                                //柱形图圆角，初始化效果
                                barBorderRadius: [20, 20, 20, 20]
                            }
                        }
                    },
                    {
                        name: "2021",
                        type: "bar",
                        stack: "check",
                        barWidth: 10,//柱图宽度
                        barCategoryGap: '30%',
                        data: [],
                        // 设置
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#FFBD2E' },                   //柱图渐变色
                                        { offset: 1, color: '#EFD191' },                   //柱图渐变色
                                    ]
                                ),
                                //柱形图圆角，初始化效果
                                barBorderRadius: [20, 20, 20, 20]
                            }
                        }
                    }
                ];
                _series[0].data = [200, 100, 80, 100, 200, 300];
                _series[1].data = [100, 200, 180, 160, 150, 400];
                // 绘制图表
                let myChart = echarts.init(document.getElementById('middleChart5'));
                // 绘制图表// 因为有定时刷新，所以先清除
                myChart.clear();
                myChart.setOption({
                    title: {},
                    tooltip: {},
                    legend: {
                        itemWidth: 14,//图例的宽度
                        itemHeight: 6,//图例的高度
                        itemGap: 55, //图例的间距
                        textStyle: {//图例文字的样式
                            color: '#F1F1F1',
                            fontSize: 14,
                            padding: [0, 0, 0, 12]
                        },
                        data: ['2020', '2021']
                    },
                    xAxis: {
                        axisLabel: {
                            textStyle: {
                                color: '#F1F1F1'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(102, 102, 102, .5)"
                            }
                        },
                        data: _xAxis
                    },
                    yAxis: {
                        color: '#F1F1F1',
                        name: '(箱)',
                        axisLabel: {
                            textStyle: {
                                color: '#F1F1F1'
                            }
                        },
                        nameTextStyle: {
                            color: '#F1F1F1',
                            padding: [0, 0, 0, -30]    // 四个数字分别为上右下左与原位置距离
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(102, 102, 102, .2)",
                                width: 1,
                                type: "solid"
                            }
                        }
                    },
                    series: _series
                });
            },
            // 右一
            rightChart6() {
                const vm = this
                let myChart = echarts.init(document.getElementById('rightChart6'));
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {},
                    color: ['rgb(16, 136, 237)', 'rgb(248, 186, 52)'],
                    legend: {
                        data: ['标杆户', '零售户'],
                        itemWidth: 28,//图例的宽度
                        itemHeight: 8,//图例的高度
                        itemGap: 55, //图例的间距
                        textStyle: {//图例文字的样式
                            color: '#F1F1F1',
                            fontSize: 14,
                            padding: [0, 0, 0, 12]
                        },
                    },
                    xAxis: {
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#F1F1F1'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(102, 102, 102, .5)"
                            }
                        },
                        type: 'category',
                        boundaryGap: false,
                        data: ['2020/11', '2020/12', '2021/01', '2021/02', '2021/03', '2021/04']
                    },
                    yAxis: {
                        color: '#F1F1F1',
                        name: '(箱)',
                        type: 'value',
                        max: 500,
                        axisLabel: {
                            textStyle: {
                                color: '#F1F1F1'
                            }
                        },
                        nameTextStyle: {
                            color: '#F1F1F1',
                            padding: [0, 0, 0, -30]    // 四个数字分别为上右下左与原位置距离
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(102, 102, 102, .2)",
                                width: 1,
                                type: "solid"
                            }
                        }
                    },
                    series: [{
                        name: '标杆户',
                        data: [200, 150, 180, 280, 210, 320],
                        type: 'line',
                        areaStyle: {
                            normal: {
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 149, 243, 0.6)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 209, 165, 0.01)'
                                }])

                            }
                        },
                    },
                    {
                        name: '零售户',
                        data: [100, 280, 200, 430, 310, 350],
                        type: 'line',
                        //区域颜色渐变
                        areaStyle: {
                            normal: {
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(246, 168, 0, 0.6)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(255, 209, 165, 0.01)'
                                }])

                            }
                        },
                    }]
                };
                // 因为有定时刷新，所以先清除
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
                //在init方法中加入下面这行代码
                window.addEventListener("resize", myChart.resize);
            },
            // 右二
            rightChart7() {
                const data = [14, 33, 22, 63, 74, 46, 10];
                const total = data.reduce(function (prev, next, index, array) {
                    return prev + next;
                })
                const vm = this
                let myChart = echarts.init(document.getElementById('rightChart7'));
                // 指定图表的配置项和数据
                let option = {
                    // tooltip: {},
                    // center: ['70%', '70%'],
                    radar: {
                        center: ['50%', '53%'],
                        name: {
                            formatter: function (value, indicator) {
                                return `{a|${Math.floor(data[indicator.index] * 100 / total)}%}\n${value}`;
                            },
                            // formatter: function (value, indicator) {
                            //     return `${value}{a|%}`;
                            // },
                            rich: {
                                a: {
                                    fontSize: 18,
                                    padding: [0, 0, 0, 2]
                                }
                            },
                            textStyle: {
                                padding: [3, 5]
                            },
                        },
                        indicator: [
                            { index: 0, name: '500万元以上', max: 100, color: 'rgba(204, 66, 32, 1)' },
                            { index: 1, name: '400-500万元', max: 100, color: 'rgba(202, 188, 33, 1)' },
                            { index: 2, name: '300-400万元', max: 100, color: 'rgba(255, 134, 37, 1)' },
                            { index: 3, name: '200-300万元', max: 100, color: 'rgba(29, 92, 201, 1)' },
                            { index: 4, name: '100-200万元', max: 100, color: 'rgba(43, 201, 30, 1)' },
                            { index: 5, name: '100-200万元', max: 100, color: 'rgba(26, 141, 202, 1)' },
                            { index: 6, name: '100万元以下', max: 100, color: 'rgba(29, 236, 229, 1)' }
                        ],
                        borderColor: "rgba(255, 195, 13, 1)",
                        axisLine: {            // 坐标轴线
                            lineStyle: {
                                width: 1,
                                color: 'rgba(4, 115, 154, 1)' // 图表背景网格线的颜色
                            }
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ["rgba(16, 44, 103, .5)"]  // 图表背景网格的颜色
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                width: 1,
                                color: 'rgba(4, 115, 154, 1)' // 图表背景网格线的颜色
                            }
                        }
                    },
                    series: [{
                        name: '零售户销量金额占比分析(%)',
                        type: 'radar',
                        symbol: "none", // 去掉图表中各个图区域的边框线拐点
                        itemStyle: {
                            normal: {
                                // color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
                                lineStyle: {
                                    color: "rgba(255, 195, 13, 1)" // 图表中各个图区域的边框线颜色
                                },
                                areaStyle: {
                                    color: 'rgba(246, 168, 0, 0.25)'
                                }
                            }
                        },
                        // areaStyle: {normal: {}},
                        data: [
                            {
                                value: data
                            },
                            {
                                name: '',
                                label: {
                                    show: false,
                                },
                                lineStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(189, 233, 255, 1)'
                                        }, {
                                            offset: .5,
                                            color: 'rgba(9, 131, 255, 1)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(189, 233, 255, 1)'
                                        }],
                                        global: false // 缺省为 false
                                    }
                                },
                                areaStyle: {
                                    color: 'rgba(0,0,0,0)'
                                },
                                animation: false,
                                value: [100, 100, 100, 100, 100, 100, 100]
                            }
                        ]
                    }]
                };
                // 因为有定时刷新，所以先清除
                myChart.clear();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, true);
                //在init方法中加入下面这行代码
                window.addEventListener("resize", myChart.resize);
            },
            startTime() {
                const vm = this
                let today = new Date();
                let year = today.getFullYear();   //获取系统的年；
                let mon = today.getMonth() + 1;   //获取系统月份，由于月份是从0开始计算，所以要加1
                let d = today.getDate(); // 获取系统日，
                let h = today.getHours();
                let m = today.getMinutes();
                let s = today.getSeconds();// 在小于10的数字前加一个‘0’
                mon = this.checkTime(mon);
                d = this.checkTime(d);
                h = this.checkTime(h);
                m = this.checkTime(m);
                s = this.checkTime(s);
                let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
                vm.curWeek = weekday[today.getDay()]
                vm.curFullYear = year + "年" + mon + "月" + d;
                vm.curHours = h + ":" + m + ":" + s;
                setTimeout(() => { this.startTime() }, 500);
            },
            startRightList() {
                const vm = this
                if (vm.curActive === 6) {
                    vm.curActive = 1
                } else {
                    vm.curActive = vm.curActive + 1
                }
                setTimeout(() => { this.startRightList() }, 5000);
            },
            checkTime(i) {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            },
            getScale() {
                const { width, height } = this;
                if(window.innerWidth<width){
                    return 1
                }else{
                let ww = window.innerWidth / width;
                let wh = window.innerHeight / height;
                return ww < wh ? ww : wh;
                }
            },
            setScale() {
                this.scale = this.getScale();
                console.log(this.scale)
                // this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
            },
            debounce(fn, delay) {
                let delays = delay || 500;
                let timer;
                return function () {
                    let th = this;
                    let args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout(function () {
                        timer = null;
                        fn.apply(th, args);
                    }, delays);
                };
            },
            onDplOver(index) {
                this.selectActive = index
            },
            selectDateClick(item, index) {
                const vm = this
                let indexArr = index - 1
                vm.selectDateItem[indexArr] = item
                vm.selectActive = ''
                switch (index) {
                    case 1:
                        this.leftMap2Div()
                        break;
                    case 2:
                        // this.middleChart5()
                        break;
                    case 3:
                        // this.middleChart5()
                        break;
                    case 4:
                        // this.rightChart7()
                        break;
                }
            },
            chart6Tab(index) {
                this.activeChart6Tab = index
                this.middleChart4()
            },
            onDplOut() {
                this.selectActive = ''
            },
            autoUpdataChart() {
                const vm = this
                let today = new Date();
                let s = today.getSeconds();
                s = this.checkTime(s);
                let curS = s.toString().substr(1, 1)
                // console.log(curS, '==========')
                switch (Number(curS)) {
                    case 0:
                        this.leftMap2Div()
                        break;
                    case 2:
                        this.middleChart4()
                        break;
                    case 4:
                        // this.middleChart5()
                        break;
                    case 6:
                        // this.rightChart7()
                        break;
                    case 8:
                        // this.rightChart6()
                        break;
                }
                setTimeout(() => { this.autoUpdataChart() }, 900);
            }
        },
        mounted() {
            // 右侧列表动画
            setTimeout(() => { this.startRightList() }, 5000);
            // 自动刷新地图
            setTimeout(() => { this.autoUpdataChart() }, 5000);
            // this.setScale();
            // window.addEventListener("resize", this.debounce(this.setScale));
            this.leftMap1Div()
            this.leftMap2Div()
            this.middleChart4()
            // this.middleChart5()
            // this.rightChart6()
            // this.rightChart7()
            let tid,
                doc=document,
                docEl = doc.documentElement;
            docEl.style.zoom=docEl.clientWidth / 7168;


            addEventListener('resize', function () {
                clearTimeout(tid);
                tid = setTimeout(function () {
                    docEl.style.zoom=docEl.clientWidth / 7168;
                    // window.location.reload();
                }, 300);
            }, false);
        },
        created() {
            const vm = this
            vm.startTime()
        }
    });
</script>

</html>
<style>
    @font-face {
        font-family: 'SourceHanSansCN-Normal';
        src: url('./font/SOURCEHANSANSCN-NORMAL.OTF');
    }

    /*屏幕适配*/
    .ScaleBox {
        /*transform-origin: 0 0;*/
        /*position: absolute;*/
        /*left: 50%;*/
        /*top: 50%;*/
        /*transition: 0.3s;*/
        width: 100%;
        height: 100%;
        background: url("./imgs/bg.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        font-size: 14px;
        color: #3f3f3f;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        margin: 0 auto;
        color: rgba(191, 236, 255);
    }

    #app {
        width: 100%;
        height: 100%;
    }

    * {
        font-family: "SourceHanSansCN-Normal", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
        margin: 0;
        padding: 0;
        border-width: initial;
        border-style: none;
        border-color: initial;
        border-image: initial;
        list-style: none;
        box-sizing: border-box;
        outline: none !important;
    }

    .header {
        width: 100%;
        height: 384px;
        display: flex;
        justify-content: space-between;
        padding: 0 334px 0 281px;
        box-sizing: border-box;
        vertical-align:top;
        line-height: 1;
    }

    .headerTime {
        margin-bottom: 22px;
    }

    .curHours {
        padding-top: 55px;
        display: inline-block;
        vertical-align:top;
        font-size: 130px;
        letter-spacing: 13px;
        color: #ffffff;
        font-weight: bold;
    }

    .curFullYear {
        padding-top: 75px;
        font-size: 72px;
        display: inline-block;
        vertical-align:top;
        font-weight: normal;
        font-stretch: normal;
        color: #60c5f4;
        color: rgba(15, 162, 255, .8);
        margin-left: 55px;
    }

    .headerTq {
        display: flex;
        align-items: flex-start;
        margin-bottom: 22px;
        font-size: 20px;
        font-weight: bold;
    }

    .headerTq img {
        padding-top: 35px;
        vertical-align: top;
        height: 149px;
        width: 135px;
    }

    .headerTq span {
        padding-top: 68px;
        display: inline-block;
        font-size: 80px;
        color: #ffffff;
        margin-left: 112px;
    }

    .main {
        display: flex;
        margin-top: 120px;
        padding: 20px 148px 109px 148px;
        box-sizing: border-box;
    }

    .mainLeft {
        width: 2200px;
    }
    .mainSection1{
        height: 669px;
        width: 100%;
        padding-right: 224px;
        padding-bottom: 31px;
        box-sizing: border-box;
        background: url("./imgs/list_bg_1.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
    }
    .mainSection2{
        height: 959px;
        width: 100%;
        padding-right: 97px;
        padding-bottom: 31px;
        box-sizing: border-box;
        padding-top: 39px;
        background: url("./imgs/list_bg_2.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
    }
    .mainSection3{
        margin-top: 41px;
        height: 959px;
        width: 100%;
        padding-right: 97px;
        padding-bottom: 31px;
        box-sizing: border-box;
        padding-top: 39px;
        background: url("./imgs/list_bg_3.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
        position: relative;
    }
    .mainSection3Menu{
        margin-left: 40px;
        position: absolute;
        right: 50px;
        top: 60px;
        display: flex;
    }
    .mainSection3Menu .mainSection3Num{
        cursor: pointer;
        width: 140px;
        height: 60px;
        background-color: #031751;
        border: solid 1px #58b7ff;
        opacity: 0.53;
        text-align: center;
        font-size: 36px;
        line-height: 60px;
        color: #a1ddff;
        margin-left: 40px;
    }
    .mainSection3Order{
        background-color: #54abf1!important;
        color: #a1ddff!important;
    }
    .mainSectionHeader {
        width: 881px;
        height: 102px;
        display: flex;
        align-items: center;
    }
    .mainSectionHeaderTitle{
        font-size: 48px;
        color: white;
        margin: 0 58px 0 20px;
    }
    .mainSectionHeaderLeft{
        width: 100px;
        height: 59px;
        background: url("./imgs/icon_title_1.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
    }
    .mainSectionHeaderRight{
        width: 404px;
        height: 18px;
        background: url("./imgs/icon_title_2.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
    }
.mainSectionHeaderTab{
    display: flex;
}
    .mainSectionHeaderTab section{
        width: 42px;
        height: 20px;
        background: #040F1E;
        border: 1px solid rgba(10, 50, 97, 1);
        font-size: 12px;
        font-weight: 400;
        color: #F1F1F1;
        line-height: 20px;
        margin-right: 4px;
        text-align: center;
        cursor: pointer;
    }
    .activeHeaderTab{
        border-color: rgba(4, 163, 255, 1) !important;
    }
    .selectDate {
        width: 77px;
        height: 20px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 400;
        color: #F1F1F1;
        cursor: pointer;
        box-sizing: border-box;
        border: 1px solid #0A3261;
    }

    .selectDateList {
        position: absolute;
        left: 0;
        top: 20px;
        z-index: 9999;
    }

    .selectDateItem {
        width: 77px;
        height: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        background: rgba(66, 108, 230, 1);
        padding: 0 10px;
        font-size: 12px;
        font-weight: 400;
        color: #F1F1F1;
        box-sizing: border-box;
        border: 1px solid #0A3261;
    }

    .selectDateItem:hover {
        /*color: rgba(191, 236, 255);*/
    }

    #leftMap1 {
        padding: 9px 9px 19px 19px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    #leftMap1 .leftMap1Top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
    }
.leftMap1TopList{
}
    #leftMap1 .leftMap1TopItem {
        display: flex;
        /*align-items: center;*/
    }

    #leftMap1 .leftMap1TopItem img {
        width: 90px;
        height: 90px;
    }

    #leftMap1 .leftMap1TopItem section {
        font-size: 34px;
        font-weight: bold;
        margin-left: 75px;
        font-stretch: normal;
        line-height: 36px;
        letter-spacing: 2px;
        color: #60c5f4;
    }

    #leftMap1 .leftMap1TopItem section p {
        margin-top: 85px;
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        line-height: 36px;
        letter-spacing: 1px;
        color: #60c5f4;
    }

    #leftMap1 .leftMap1TopItem section span {
        font-size: 41px;
        font-weight: bold;
        font-stretch: normal;
        line-height: 36px;
        letter-spacing: 2px;
        color: #ffffff;
        margin-right: 5px;
    }

    #leftMap1Div {
        width: 1077px;
        height: 533px;
        background: url("./imgs/783.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #leftMap1Div .leftMap1DivBg {
        width: 504px;
        height: 504px;
        background: url("./imgs/round.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
    }

    .leftMap1Bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        padding-top: 12px;
        border-top: 2px solid rgba(10, 50, 97, .6);
    }

    .leftMap1Bottom section {
        display: flex;
        width: 40%;
        align-items: center;
        margin-bottom: 5px;
    }

    .leftMap1Bottom span {
        font-size: 16px;
        font-weight: bold;
        color: #FEFFFF;
        display: inline-block;
        margin: 0 8px 0 19px;
    }

    .leftChart3Top {
        font-size: 12px;
        font-weight: 400;
        color: #BFECFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 25px;
        box-sizing: border-box;
    }

    .leftChart3 {
        padding: 15px 0 24px 19px;
        box-sizing: border-box;
    }

    .leftChart3Item {
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        margin-top: 8px;
    }

    .leftChart3Info {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .leftChart3Info i {
        font-size: 12px;
        color: #B7E2F4;
        font-style: normal
    }

    .leftChart3Main {
        width: 614px;
        margin-top: 5px;
    }
    /*//改变背景色 style不能加scope*/
    .leftChart3Main .el-progress-bar__outer {
        background-color: rgba(28, 40, 53, 1);
    }
    .mainMiddle {
        margin-top: 25px;
        width: 2495px;
        height: 2638px;
        position: relative;
        background: url("./imgs/map.png")  no-repeat center;
        background-size: 100% 100%;
    }

    .mainMapRight {
        position: absolute;
        right: 37px;
        top: 55px
    }

    .mainMapRightItem {
        margin-bottom: 22px;
        text-align: right;
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
    }

    .mainMapRightItem .mainMapNum {
        margin-bottom: 2px;
        font-size: 24px;
        font-weight: bold;
        color: #FF7C7C;
    }

    .mainMapFooter {
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 35px;
        left: 155px;
    }

    .mainMapFooter section {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        color: #E4E4E4;
        margin-right: 40px;
    }

    .mainMapFooter section img {
        margin-right: 12px;
    }
.mainMapLegend{
    width: 112px;
    height: 115px;
    background: rgba(218, 234, 255, 0.1);
    border: 1px solid;
    border-image: linear-gradient(118deg, #54C6FE, #040F1E, #62B7FF) 10 10;
    font-size: 14px;
    font-weight: bold;
    color: #E4E4E4;
    position: absolute;
    bottom: 35px;
    left: 5px;
    padding: 4px 0 0 12px;
    line-height: 24px;
    box-sizing: border-box;
}
.mainMapLegend span{
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #FF424F;
    border-radius: 50%;
    margin-right: 12px;
}
    .mainFooter {
        display: flex;
    }

    .mainFooter section {
        width: 50%
    }

    .rightInput {
        width: 100%;
        position: relative;
        height: 28px;
    }

    .rightInput input {
        width: 100%;
        height: 28px;
        padding: 0 80px 0 30px;
        box-sizing: border-box;
        background: rgba(209, 238, 255, 0.05);
        border: 1px solid #063568;
        border-radius: 14px;
        font-size: 14px;
        font-weight: 400;
        color: #F1F1F1;
    }

    input[type=text]::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #F1F1F1;
    }

    input[type=text]:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #F1F1F1;
    }

    input[type=text]::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #F1F1F1;
    }

    input[type=text]:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #F1F1F1;
    }

    .searchImg {
        position: absolute;
        right: 50px;
        top: 7px;
        cursor: pointer;
    }

    .updateImg {
        position: absolute;
        top: 7px;
        right: 16px;
        cursor: pointer;
    }

    .rightInput1px {
        position: absolute;
        top: 5px;
        width: 2px;
        height: 18px;
        background: #063568;
        right: 40px;
    }

    .rightList {
        margin-bottom: 11px;
    }

    .rightItem {
        margin-top: 10px;
        width: 96%;
        height: 29px;
        background: linear-gradient(90deg, rgba(49, 130, 211, 0.5) 0%, rgba(49, 130, 211, 0.3) 100%);
        /*opacity: 0.3;*/
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, .3);
        display: flex;
        align-items: center;
        line-height: 26px;
        padding-left: 11px;
        border-left: 2px solid rgba(49, 130, 211, .7);
    }

    .rightList .rightItemActive {
        background: linear-gradient(90deg, rgba(49, 130, 211, 0.5) 0%, rgba(49, 130, 211, 0.3) 100%);
        font-size: 16px;
        font-weight: bold;
        color: #FFFFFF;
        height: 61px;
        justify-content: space-between;
        border-left: 2px solid rgba(49, 130, 211, 1);
        /*opacity: ;*/
    }

    .rightList .rightItemActive section {
        font-size: 18px;
        font-weight: bold;
        color: #FFFFFF;
        width: 25%;
    }

    .rightList .rightItemActive main {
        font-size: 14px;
        font-weight: 400;
        color: #FFFFFF;
        width: 73%;
    }

    .rightList .rightItemActive span {
        font-size: 14px;
        font-weight: 400;
        color: #04A3FF;
        /*margin-left: 38px;*/
        cursor: pointer;
        text-align: left;
        display: block;
    }
    .mainRight{
        padding-right: 12px;
        box-sizing: border-box;
    }
    .mainSection4{
        width: 2199px;
        padding-left: 100px;
        height: 1400px;
        background: url("./imgs/list_bg_4.png")  no-repeat center;
        background-size: 100% 100%;
    }
    .mainSection5{
        width: 2199px;
        padding-left: 100px;
        height: 1100px;
        background: url("./imgs/list_bg_4.png")  no-repeat center;
        background-size: 100% 100%;
    }
    .mainRight2List{
        margin-top: 63px;
        width: 100%;
        padding-right: 30px;
    }
    .mainRight2Item{
        margin-bottom: 44px;
    }
    .mainRight2ListTop{
        display: flex;
        align-items: center;
        /*justify-content: space-between;*/
        /*padding-left: 133px;*/
        padding-right: 53px;
        height: 97px;
        font-size: 43px;
        color: #ffffff;
        border: solid 2px #4e6bab;
    }
    .mainRight2ListIcondff{
        width: 14px;
        height: 67px;
        background-color: #fdfdff;
    }
    .mainRight2ListIcon672{
        width: 14px;
        height: 67px;
        background-color: #ffe672;
    }
    .mainRight2ListIcon{
        width: 14px;
        height: 67px;
        background-color: #0588e2;
    }
    .mainRight2ListTopLeft{
        flex: 1;
        padding-left: 100px;
    }
    .mainRight2ListTopRight{
        font-size: 38px;
        color: #ffe96c;
    }
    .mainRight2ListBottom{
        display: flex;
        align-items: center;
        font-size: 38px;
        color: #ffffff;
        height: 119px;
        background-color: #11132c;
        border: solid 2px #7bc5ff;
        padding: 0 79px;
    }
    .mainRight2ListBottom div{
        margin-right: 80px;
    }
    .mainRight1List{
        padding-top: 100px;
        width: 100%;
        padding-right: 30px;
    }
    .mainRight1Item{
        display: flex;
        align-items: center;
        margin-bottom: 35px;
        height: 144px;
        /*width: 1967px;*/
    }
    .mainRight1ItemActive .mainRight1LeftImg{
        color: #c6f53d;
    }
    .mainRight1ItemActive{
        border: solid 3px #66f7fd;
        border-left: none;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
    }
    .mainRight1LeftImg{
        display: flex;align-items: center;
        justify-content: center;
        width: 163px;
        font-size: 79px;
        font-weight: bold;
        font-stretch: normal;
        color: #66f7fd;
        height: 163px;
        background: url("./imgs/icon_list4_1.png")  no-repeat center;
        background-size: 100% 100%;
    }
    .mainRight1Item img{
        width: 44px;
        height: 57px;
        margin-left: 100px;
        margin-right: 20px;
    }
    .mainRight1LeftText{
        font-size: 41px;
        font-weight: bold;
        color: #ffffff;
        margin: 0 50px;
        width: 746px;
    }
    .mainRight1LeftNum{
        font-size: 33px;
        color: #ffffff;
    }
</style>
